<script setup>
import { onMounted, ref } from 'vue'
import projectCard from './components/projectCard.vue'
import { getMyProject } from '@/api/myProject'
const goBack = () => {
  uni.navigateBack()
}
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
const navBarTop = menuButtonInfo.top
const navBarHeight = menuButtonInfo.height

const projectList = ref()

onMounted(async () => {
  // 获取项目列表
    const res = await getMyProject()
    projectList.value = res.data.list
})
</script>

<template>
  <view>
    <div class="haha">
      <div class="navigate-bar" :style="{ paddingTop: navBarTop + 'px', lineHeight: navBarHeight + 'px' }">
        <img src="../../static/backArrow.png" alt="" class="backArrow" @click="goBack" />
        <h2>我的项目</h2>
      </div>
      <view class="project-container" :style="{ paddingTop: navBarTop + navBarHeight + 'px' }">
        <projectCard v-for="item in projectList" :key="item.id" :project="item"></projectCard>
      </view>
    </div>
  </view>
</template>

<style scoped lang="scss">
page {
  height: 100vh;

  background-color: rgb(239, 240, 244);
}
.haha {
  height: 100vh;
  background-color: rgb(239, 240, 244);
}
.navigate-bar {
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: rgb(239, 240, 244);
  z-index: 999;

  .backArrow {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 1%;
  }
  h2 {
    justify-items: end;
  }
}
.project-container {
  background-color: rgb(239, 240, 244);
  display: flex;
  flex-direction: column;
  justify-content: center;
  .project {
    display: flex;
    flex-direction: row;
    ::v-deep.lmg {
      width: 100px;
      height: 100px;
      flex-grow: 4;
    }
    ::v-deep.active-card {
      flex-grow: 5;
      width: 50px;
    }
  }
}
</style>
